import {defineComponent, reactive, ref} from "vue";
import style from "./css/index.module.css";
import {TypesStore} from "@/stores/types";
import {storeToRefs} from "pinia";
import BasicEditor from "@/components/BasicEditor/index.vue";
import Upload from "@/components/Upload";
import {ElMessage} from "element-plus";
import {CategoriesStore} from "@/stores/categories";
import {useRouter} from "vue-router";
export default defineComponent({
    setup(){
        const type_store = TypesStore()
        const {typesAllList}  = storeToRefs(type_store)
        // 用information数据仓库
        const category_store = CategoriesStore()
        let {categoriesInfo } = storeToRefs(category_store)

        categoriesInfo.value = {}
        const router = useRouter()

        const formRef = ref(null)
        const rules = reactive({
            title: {
                required: true,
                message: '请输入项目标题',
                trigger: 'blur'
            },
            type_id: {
                required: true,
                message: '请选择项目类别',
                trigger: 'change'
            },
            money: {
                required: true,
                message: '请输入期望金额',
                trigger: 'blur'
            },
            end_time: {
                required: true,
                message: '请选择结束时间',
                trigger: 'change'
            },
            describe: {
                required: true,
                message: '请输入项目描述',
                trigger: 'blur'
            }
        })
        const fileList = ref([])


        type_store.getTypeAllList()


        // 表单校验
        const validateForm = async () => {
            if(fileList.value[0]?.response){
                categoriesInfo.value.imgUrl = import.meta.env.VITE_SEARVER_HOST + "/" + fileList.value[0].response.result.img_url
            }
            if(categoriesInfo.value.describe === '<p><br></p>') categoriesInfo.value.describe = undefined
            await formRef.value.validate(async (valid, fields) => {
                if (valid) {
                    const code = await category_store.addCategories()
                    if(code === 0){
                        ElMessage.success('申请成功，请等待审核')
                        router.replace('/mine/index')
                    }
                    formRef.value.resetFields()
                }
            })
        }


        const changeValue = (name, value) => {
            categoriesInfo.value[name] = value
        }

        return ()=>{
            const typeOption = typesAllList.value.map(item => {
                return     <el-option
                    key={item.id}
                    label={item.type_name}
                    value={item.id}
                />
            })
            return <>
                <div className={style.container}>
                    <el-form
                        model={categoriesInfo.value}
                        ref={formRef}
                        rules={rules}
                        label-width={'120px'}>
                        <el-row gutter={20}>
                            <el-col span={10}>
                                <el-form-item label={"项目标题"} prop={'title'}>
                                    <el-input style={{width:'200px'}} v-model={categoriesInfo.value.title} placeholder="请输入项目标题"/>
                                </el-form-item>
                            </el-col>
                            <el-col span={10}>
                                <el-form-item label={"项目类别"} prop={'type_id'}>
                                    <el-select style={{width:'200px'}} v-model={categoriesInfo.value.type_id} className="m-2" placeholder="请选择类型" size="small">
                                        {typeOption}
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col span={10}>
                                <el-form-item label={"项目图片"} prop={'title'}>
                                    <Upload fileList={fileList}/>
                                </el-form-item>
                            </el-col>
                            <el-col span={10}>
                                <el-form-item label={"期望金额"} prop={'expected_amount'}>
                                    <el-input-number style={{width:'200px'}}
                                                     precision={2}
                                                     v-model={categoriesInfo.value.expected_amount} placeholder="请输入期望金额"/>
                                </el-form-item>
                            </el-col>
                            <el-col span={10}>
                                <el-form-item label={"结束时间"} prop={'end_time'}>
                                    <el-date-picker
                                        v-model={categoriesInfo.value.end_time}
                                        type="datetime"
                                        placeholder="请选择结束时间"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col span={20}>
                                <el-form-item label={"项目描述"} prop={'describe'}>
                                    <BasicEditor valueContent={categoriesInfo.value.describe} changeName={'describe'} changeValue={changeValue}></BasicEditor>
                                </el-form-item>
                            </el-col>
                            <el-col span={20}>
                              <div className={style.btnBottom}>
                                  <el-button
                                      type="primary"
                                      onClick={validateForm}>确认申请</el-button>
                              </div>
                            </el-col>
                        </el-row>

                    </el-form>
                </div>
            </>
        }
    }
})